<script setup lang="ts">
import { ref, onMounted,nextTick, watch, watchEffect, onUnmounted, h, computed } from 'vue'
import { liveOpenPlayer } from '../../stores/api/openClass'
import { useRoute, useRouter } from "vue-router";
import { useCounterStore } from '../../stores/counter'
import { ImgUrlPrefix } from '../../utils/config'
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
const props:any = defineProps({
    // 触发滚动的容器
    isShowVideo: {
      type: [Boolean],
      default: false
    },
    video_url: {
      type: [String, Array],
      default: '',
    },
    start_time: {
        type: [String, Number],
        default: 0,
    }
})
const emits = defineEmits(['backChange'])
const info:any = ref({}) // 获取直播信息
const router:any = useRouter()
const route:any = useRoute()

const player = ref(null)
const isShowAirtime = ref<Boolean>(true)
const store = useCounterStore()
const isShow = ref(false)

watchEffect(() => {
    console.log('userWebsocket.webSocket',store.webSocketList.content)
})

watch(() => props.video_url, (newVal:any, oldValue) => {
    if(newVal) {
        getLiveInfo()
    }
})
watch(() => props.isShowVideo, (newVal:any, oldValue) => {
    isShow.value = newVal
})
// 获取正在直播直播间
const getLiveInfo = () => {
    player.value = null
    liveOpenPlayer({ url: props.video_url}, 'post').then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            info.value = res.data
            if(res.data.url) {
                  // player-container-id 为播放器容器 ID，必须与 html 中一致
                let val = res.data.url.substring(res.data.url.lastIndexOf('/'))
                console.log(val,isShowAirtime.value,times.value,'val')
                if(times.value <= 0 || !isShowAirtime.value) {
                    console.log(isShowAirtime.value,'isShowAirtime')
                    player.value = TCPlayer('player-container-id', {
                        sources: [{
                        src: res.data.url, // 播放地址
                        }],
                        // m3u8: res.data.url, // 替换为你的直播流地址
                        autoplay: true,
                        poster: getImgUrl(res.data.thumbnail), // 可选，封面图片地址
                        // width: 640,
                        // height: 480,
                        // wording: {
                        //     2032: "请求视频失败，请检查网络",
                        //     2048: "请求 m3u8 文件失败，可能是网络错误或者跨域问题"
                        // }
                        licenseUrl: 'license/url', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
                    });
                    player.value.on('error', function(error) {
                        // 做一些处理
                        console.log('error错误',error)
                    });
                }
            }
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

// 图片地址拼接
const getImgUrl = (val) => {
    const url = ImgUrlPrefix(val)
    return url
}

const times = computed(() => {
    const date = Date.now();
    if(props.start_time && props.start_time != 0) {
        let time = props.start_time - date
        console.log('time',props.start_time, time)
        if(time < 0) {
            return time
        } else {
            return props.start_time
        }
    } else {

        return 0
    }
})
const onFinish = () => {
    console.log('完成')
    isShowAirtime.value = false
    getLiveInfo()
}
// 取消
const resetForm = () => {
  emits("backChange", { isShow: false});
};
onMounted(() => {
  console.log(props.video_url,'直播信息')
  console.log(navigator.onLine,'网络状态')
});
onUnmounted(() => {
    if (player.value) {
        player.value.dispose(); // 假设TCPlayer有dispose方法
    }
})
</script>

<template>
  <div class="live-room">
    <a-modal v-model:open="isShow" @cancel="resetForm" :title="'视频'" width="700px" ok-text="" cancel-text="" :footer="null">
        <div class="live-left">
            <div class="live-item-top">
                <div class="time-item" v-if="times > 0 && isShowAirtime">
                    <div>开播倒计时</div>
                    <a-statistic-countdown :value="times" style="margin-right: 50px" @finish="onFinish" :style="{'margin-right': 0}" :valueStyle="{color: '#f50','marginRight': 0}">
                    </a-statistic-countdown>
                </div>
                <video v-else id="player-container-id" class="live-video" height="270" preload="auto" playsinline webkit-playsinline></video>
            </div>
        </div>
    </a-modal>
  </div>
</template>

<style scoped>
.live-room{
   color: #333;
   /* background-color: rgba(22,24,35,1) ; rgba(22,24,35,1) */
}
.live-left{
   flex: 3;
   /* height: 93vh; */
   position: relative;
   overflow: hidden;
   /* padding:0 15px 15px 15px; */
}
.live-video{
  width: 100%;
  height: 70vh;
  object-fit: cover; /* 确保视频撑满父容器 */
  border-radius: 5px;
}
.basic-card{
    background-color: rgb(51,52,63);
    border: none;
    margin-bottom: 10px;
}
.basic-info{
    display: flex;
    color: #999;
    padding-bottom: 6px;
}
.cover-img{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #e6e8eb;
}
.input-item-dd{
    width:100px;
    height: 30px;
    padding-top: 0;
    background-color: transparent;
    font-size: 16px; /* 占位符字体大小 */ 
    border:none;
    outline: none;
    color: #fff;
    margin-top: 7px;
    margin-left: 20px;
}
.time-item-s{
    /* height: 30px; */
    padding-top: 0;
    background-color: transparent;
    color: #fff;
    margin-top: 7px;
    margin-right: 60px;
}
.type-item{
  padding-left:20px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.type-s{
    display: inline-block;
    padding: 5px 15px;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.active{
    background-color: rgb(51,52,63);
}

.positin-boottom{
    position: absolute;
    bottom: 10px;
    width: 97%;
}
.bottom-item-a{
    width:100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   background-color: rgb(51,52,63);/*# 080808*/
   padding: 8px 15px;
   border-radius: 10px;
}
.btn-ss{
    background-color: #fe5d26;
    height: 34px;
}
.btn-ss:hover{
    background-color: #fe5d26;
}

.live-right{
    color: #fff;
   flex:1;
   position:relative;
   /* background-color: rgb(37,38,50); */
   padding-right: 10px;
}
.live-right-list{
    background-color: rgb(51,52,63); /* rgb(51,52,63)*/
    color:#fff;
    padding: 10px 20px;
    height: 22vh;
    border-radius: 10px;
    overflow-y: auto;
}
.live-item{
   display: flex;
   align-items: center;
   margin-top: 20px;
   font-size: 14px;
}
.live-num{
    line-height: 30px;
    margin-bottom: 20px;
}
.ranking{
    margin-right: 30px;
    min-width: 50px;
}
.nick-name{
    margin:0 20px 0 10px;
}
.img-avatar{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.grade{
    width: 30px;
}

.live-message{
    padding: 10px 20px;
    /* background-color: rgb(37,38,50); */
    height: 62.5vh;
    background-color: rgb(51,52,63); /* rgb(51,52,63)*/
    border-radius: 10px;
    margin-top: 15px;
    overflow-y: auto;
}
.msg-item{
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    font-size: 14px;
}
.time-ss{
    margin-right: 3px;
    line-height: 30px;
    padding: 3px 7px;
    color: #333;
    border-radius: 5px;
}
.time-active{
    background-color: rgb(51,52,63);
    color: #fff;
}
.msg-grade{
    width: 40px;
}
.tag-xx{
    border-radius: 36px;
    font-size: 12px;
    padding: 0px 10px;
}
.name{
 color: #8ce7ff;
 margin:0 10px 0 0;
}
.msg-content{
    line-height: 25px;
    font-size: 14px;
}
.bottom-contt{
    position: absolute;
    bottom: 0;
    width: 100%;
    /* background-color: rgb(37,38,50); */
}
.bottom-send{
    display: flex;
    align-items: center;
    color: #fff;
    background-color: rgb(51,52,63);
    margin: 10px 10px 10px 0;
    padding: 8px 8px 8px 0;
    border-radius: 10px;
}
.send-input{
    background-color: rgb(51,52,63);
    font-size: 16px; /* 占位符字体大小 */
    border:none;
    box-shadow: none;
    outline: none;
    color: #fff;
}
.send-input::placeholder {
  font-size: 14px; /* 占位符字体大小 */
  color: #fff; /* 占位符字体颜色 */
}
.read-the-docs {
  color: #888;
}
.emoji-box{
    display: flex;
    flex-wrap: wrap;
    max-width:400px;
}
.emoji-item{
    margin-right: 10px;
    margin-bottom: 5px;
}
.live-item-top{
    position: relative;
    height: 70vh;
}
.time-item{
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    text-align: center;
    color:  #f50;
    padding-top: 24vh;
    line-height: 48px;
    font-size: 18px;
}
</style>